<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>澜悦产品单</title>
<script src="https://cdn.bootcss.com/vue/2.6.11/vue.js"></script>
<script src="https://cdn.bootcss.com/axios/0.19.2/axios.min.js"></script>
<style media="all">
    th{
        padding: 12px 0;

    }
</style>
</head>

<body>
    <div class="box" style="font-size:22px">
<table width="1000" style="font-size:18px" border="1" cellspacing="0" cellpadding="0">
  <caption>
  <h2>澜悦产品单</h2>

  </caption>
  <tr>
    <th scope="col">订单编号</th>
    <th scope="col">{$formData['sn']}</th>
    <th scope="col">会员</th>
    <th scope="col">{$formData['user_name']}</th>
    <th scope="col">日期</th>
    <th scope="col">{:date('Y-m-d',time())}</th>
    <th>&nbsp;</th>
    <th>&nbsp;</th>
    <th>&nbsp;</th>
  </tr>
<!-- </table>
<table width="1000" style="font-size:18px" border="1" cellspacing="0" cellpadding="0"> -->
  <tr>
      <th>序号</th>
    <th scope="col">产品名称</th>
    <th scope="col">数量</th>
    <th scope="col">金额</th>
    <th scope="col">顾问</th>
    <th scope="col">美容师</th>
    <th scope="col">结算方式</th>
    <th scope="col">是否寄存</th>
    <th scope="col">备注</th>
  </tr>
  <tr v-for="item,index in productData">
      <th>{{index+1}}</th>
    <th><span>{{item.name}}</span></th>
    <th>{{item.num}}</th>
    <th>{{item.price2}}</th>
    <th>{{item.adviser_id}}</th>
    <th>{{item.technician_ids}}</th>
    <th>{{item.account_id}}</th>
    <th><span v-if="item.is_deposit == 1">带走</span><span v-if="item.is_deposit == 2">寄存</span></th>
    <th>{{item.bak}}</th>
  </tr>
  <tr>
      <th>合计</th>
      <th>&nbsp;</th>
      <th>&nbsp;</th>
      <th>{{zongPrice}}</th>
      <th colspan="">&nbsp;</th>
      <th colspan="">&nbsp;</th>
      <th colspan="">&nbsp;</th>
      <th colspan="">&nbsp;</th>
      <th colspan="">&nbsp;</th>
  </tr>
</table>
<br>
<div class="" style="width:60%;margin:0 auto;text-align:right">
    <span>顾客签字：&nbsp;</span>
</div>
</div>
<script>
    var mv = new Vue({
        el:'.box',
        data: {
            form: {
                 id:{$formData.id},
                 sn:'{$formData.sn}',
                 user_id:{$formData.user_id},
                 cashier_id:{$formData.cashier_id},
                 finance_id:'',
                 status:'',
              },
            financeList:{:json_encode($financeList)},
            productData: [],
            CashierList:{:json_encode($cashiers)},
            UserList:{:json_encode($userList)},
            AdviserList:{:json_encode($advisers)},
            TechnicianList:{:json_encode($technicians)},
            warehouses:{:json_encode($warehouses)},
            AccountList:{:json_encode($accounts)},
            products:{:json_encode($productList)},
            zongPrice:0,
        },
        created(){
          var products = {:json_encode($formData.goods)};
          console.log(this.AccountList)
            for(var k = 0;k < products.length;k++){
                for (var j = 0; j < this.AdviserList.length; j++) {
                    if(this.AdviserList[j]['id'] == Number(products[k].adviser_id)){
                        var adv = this.AdviserList[j]['nick'];
                    }
                }
                var tec1 = '';
                for (var j = 0; j < this.TechnicianList.length; j++) {
                    if(products[k].technician_ids.map(x => Number(x)).includes(this.TechnicianList[j]['id'])){
                        tec1 += this.TechnicianList[j]['nick'] + '、';
                    }
                }
                for (var j = 0; j < this.AccountList.length; j++) {
                    if(this.AccountList[j]['id'] == Number(products[k].account_id)){
                        var settlement = this.AccountList[j]['name'];
                    }
                }
                this.productData.push({
                      product_id:Number(products[k].product_id),
                      name:products[k].name,
                      price2: products[k].price2,
                      bak: products[k].bak,
                      num:Number(products[k].num),
                      is_deposit:Number(products[k].is_deposit),
                      technician_ids:tec1,
                      adviser_id:adv,
                      account_id:settlement,
                      warehouse_id:Number(products[k].warehouse_id),
                });
            }
            // this.defaultProduct = this.products[0]
        },
        methods: {
          setProduct_price(item, num) {
              item.price2 = (((item.price2||0)  / (item.old_number2||1)) * num).toFixed(2)
              item.old_number2 = num
          },
            addPro:function(){
              this.productData.push({
                product_id:Number(this.defaultProduct.id),
                name:this.defaultProduct.name,
                price2: this.defaultProduct.price2,
                num:1,
                is_deposit:1,
              });
            },

          removeItem:function(idx){
            this.productData.splice(idx,1);
          },
          proSelect:function(idx){
            var that = this;
              let row = that.products.filter(function(p){
                 return p.id === that.productData[idx].product_id;
             })[0]
                Object.keys(row).map(key => {

                  if (key !== 'product_id') {
                    that.$set(that.productData[idx], key, row[key])
                  }
                })

          },
          onSubmit() {
            var that = this
            var params = this.form;
            axios.post('{:url('editDo')}', params).then(function (response) {
                if(response.data.status === true){
                    var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                    that.$message({
                        type: 'success',
                        message: response.data.message,
                        onClose: function(){
                            parent.layer.close(index); //再执行关闭
                            window.parent.location.reload();
                        }
                    })
                }else{
                    that.$message({
                        type: 'error',
                        message: response.data.message
                    })
                }
            }).catch(function (error) {
                console.log(error);
            });
        },

    },
    watch:{
        productData:{
            handler:function(){
                var sum = 0
                  this.productData.map(i => {
                    sum +=  Number(i.price2)
                  })
                  this.zongPrice =  Number.isNaN(sum) ? 0 : sum
            },
            deep:true//对象内部的属性监听，也叫深度监听
        },
    }
    })


</script>

</body>
</html>
